<template>
  <div>
    <h1>niuniu</h1>
    <!-- props传值的过程：
    1.将父组件中的值，用过v-bind绑定到子组件标签上
    2.子组件进行接收，接收时数据的格式：（没有的话就别接收了）
    ①props: ["msg", "arr"]
    ②
    props: {
        msg: {
        type: String, //接收到的数据的数据类型
        required: true, //可写可不写，如果required为true，必须进行传递，不传就会报错
        },
        arr: {
        type: Array,
        },
    },
    3.正常使用即可
    
    注：props为父子传值，父组件传递给子组件，不能跨级
     -->

    <!-- props接收父组件传递过来的值，接收后，用法同data中的相同 -->
    <h2>{{ msg }}</h2>
    <h2>{{ arr }}</h2>
    <ul>
      <!-- v-for在vue-cli脚手架中，必须写:key否则报错 -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item.name }}---{{ item.age }}
      </li>
    </ul>
    <xiao-niu :msg="msg"></xiao-niu>
  </div>
</template>

<script>
import XiaoNiu from "../components/XiaoNiu";
export default {
  name: "",
  //   props: ["msg", "arr"],
  props: {
    msg: {
      type: String, //接收到的数据的数据类型
      required: true, //可写可不写，如果required为true，必须进行传递，不传就会报错
    },
    arr: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  components: {
    XiaoNiu,
  },
};
</script>
<style lang='' scoped>
</style>